<template>
  <div class="q-user-login">
    <div class="login-wapper">
      <div class="q-login-logo">
        <img src="../assets/FgP-BkmxyKWjMKv-bAbvpXg4G2r2.png" alt="" />
        <span>登录</span>
      </div>
      <div class="q-login-from">
        <div class="wapper-from">
          <div class="login-tab">
            <div
              class="login-tab-item"
              @click="tabId = 1"
              :class="{ current: tabId === 1 }">
              <a>账号登录</a>
            </div>
            <div
              class="login-tab-item"
              @click="tabId = 2"
              :class="{ current: tabId === 2 }">
              <a>注册</a>
            </div>
          </div>
          <div class="login-tab-context">
            <!-- 登录表单 -->
            <div class="login-tab-context-item" v-show="tabId === 1">
              <el-form
                style="margin-top: 30px"
                :model="formLabelAlign"
                :rules="relusForm"
              >
                <el-form-item prop="loginName">
                  <el-input
                    v-model="formLabelAlign.user_id"
                    type="text"
                    placeholder="账号"
                    clearable
                  >
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="formLabelAlign.user_pw"
                    type="password"
                    placeholder="密码"
                    clearable
                  >
                  </el-input>
                  <span
                    style="
                      color: #8c8c8c;
                      font-size: 13px;
                      position: absolute;
                      right: 0;
                      bottom: -30px;
                    "
                  >
                    忘记密码
                  </span>
                </el-form-item>
                <el-form-item>
                  <el-button @click="subForm">登录</el-button>
                </el-form-item>
              </el-form>
              <div class="login-auth">
                <a href="">
                  <img
                    src="../assets/QQ.png"
                    style="background-color: deepskyblue"
                  />
                </a>
                <a href="">
                  <img
                    src="../assets/微信.png"
                    style="background-color: #10b041"
                  />
                </a>
                <a href="">
                  <img src="../assets/微博.png" style="background-color: red" />
                </a>
              </div>
              <div class="login-auth">
                <span>
                  <el-link type="success" @click="tabId = 2"
                    >没有账号？立即注册</el-link
                  >
                </span>
              </div>
            </div>
            <!-- 注册表单 -->
            <div class="login-tab-context-item" v-show="tabId === 2">
              <el-form
                style="margin-top: 30px"
                :model="registerFormLabel"
                :rules="registerRelusForm">
                <el-form-item prop="user_id">
                  <el-input
                    v-model="registerFormLabel.user_id"
                    type="text"
                    placeholder="请输入账号"
                    clearable>
                  </el-input>
                </el-form-item>
                <el-form-item prop="user_pw">
                  <el-input
                    v-model="registerFormLabel.user_pw"
                    type="password"
                    placeholder="请输入密码"
                    clearable>
                  </el-input>
                </el-form-item>
                <el-form-item prop="pas2">
                  <el-input
                    v-model="regisPs"
                    type="password"
                    placeholder="请确认密码"
                    clearable>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="registerForm">注册</el-button>
                </el-form-item>
              </el-form>
              <div class="login-auth">
                <a href="">
                  <img
                    src="../assets/QQ.png"
                    style="background-color: deepskyblue"
                  />
                </a>
                <a href="">
                  <img
                    src="../assets/微信.png"
                    style="background-color: #10b041"
                  />
                </a>
                <a href="">
                  <img src="../assets/微博.png" style="background-color: red" />
                </a>
              </div>
              <div class="login-auth">
                <span>
                  <el-link type="success" @click="tabId = 1">
                    已有账号？立即登录
                  </el-link>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabId: 1,
      formLabelAlign: {
        user_id: "admin",
        user_pw: "123456",
      },
      registerFormLabel: {
        user_id: "2018001",
        user_pw: "123456",
      },
      regisPs: "123456",
      sta: true,
      relusForm: {
        user_id: [
          { required: true, message: "请输入用户名" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符" },
        ],
        user_pw: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
      registerRelusForm: {
        user_id: [
          { required: true, message: "请输入用户名" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符" },
        ],
        user_pw: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        regisPs: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    /**
     * 登录请求
     */
    async subForm() {
      await this.$api
        .userLogin("userLogin", this.formLabelAlign)
        .then((res) => {
          if (res.data.code === true) {
            let userInf = {
              userId: res.data.username,
              userToken: res.data.token,
            };
            this.$store.commit("addUserInfo", userInf);
            this.$message({
              message: "登录成功",
              type: "success",
              duration: 1500,
            });
            //本地储存
            localStorage.setItem("MODEL_ID", userInf.userToken);
            window.sessionStorage.setItem("token", userInf.userId);
            setTimeout(() => {
              this.$router.push("/layout");
            }, 2000);
          } else {
            this.$message.error(res.data.status);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    //注册
    async registerForm() {
      if (this.registerFormLabel.user_pw === this.regisPs) {
        await this.$api
          .registerUser("resUser", this.registerFormLabel)
          .then((res) => {
            console.log(res.data.rows);
            if (res.data.rows === 1) {
              this.$message.success(res.data.message);
            } else {
              this.$message.warning(res.data.message);
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message.error(err);
          });
      } else {
        this.$message.warning("注册密码不一致！请重新输入");
      }
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 320px){
  .q-user-login{
    width: 1220px;
    height: 2000px;
  }
}
@media screen and (min-width: 1200px){
  .q-user-login{
    width: 100%;
    height: 100vh;
  }
}
.current {
  border-bottom: 2px solid #10b041;
  color: #10b041;
}

.q-user-login {
  height: 100vh;
  background: url(../assets/ecb39528d488b6c520f7ddd3898379d6.jpg) top/cover
    no-repeat;
  position: relative;
}

.login-wapper {
  position: absolute;
  transform: translate(-50%);
  top: 50px;
  left: 50%;

  .q-login-logo {
    display: flex;
    flex-direction: row;
    justify-content: center;

    img {
      transform: scale(0.7);
    }

    span {
      color: white;
      font-size: 24px;
      padding-top: 26px;
      text-shadow: 0 0 4px rgb(0 0 0 / 30%);
    }
  }

  .q-login-from {
    width: 500px;
    background-color: white;
    margin-top: 30px;
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  }

  .wapper-from {
    padding: 12px 20px;
    background-color: white;

    .login-tab {
      width: 100%;
      height: 60px;
      border-bottom: 2px solid #e8e8e8;
      line-height: 60px;
    }

    .login-tab-item {
      float: left;
      width: 50%;
      text-align: center;
    }

    .login-tab-context {
      .el-form-item {
        margin-top: 32px;

        /deep/.el-form-item__content {
          line-height: 30px;
          position: relative;

          input {
            border-radius: 0;
          }

          .el-button {
            width: 100%;
            background-color: #10b041;
            color: white;
          }
        }
      }

      .login-auth {
        display: flex;
        flex-direction: row;
        margin: 30px 0 10px;
        font-size: 14px;

        a {
          flex: 1;
          text-align: center;

          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            padding: 5px;
          }
        }
      }
    }
  }
}
</style>